<template>
  <div>
<el-breadcrumb separator-class="el-icon-arrow-right">
  <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
  <el-breadcrumb-item>角色管理</el-breadcrumb-item>
  <el-breadcrumb-item>角色列表</el-breadcrumb-item>
</el-breadcrumb>

<el-card>
 <el-button type="primary" @click="add">添加角色</el-button>

 <el-table
    :data="roles"
    style="width: 100%">
    <el-table-column type="expand">
      <template slot-scope="props">
         

          <div class="con">

            <el-row
              v-for="item1 in props.row.children"
              :key="item1.id"
              class="one">
                  <el-col :span="6">

                      <el-tag closable
                      @close="del(props.row,item1.id)"
                      >{{item1.authName}}</el-tag>

                  </el-col>
                  <el-col :span="18">
                    <el-row
                    class="two"
                    v-for="item2 in item1.children"
                    :key="item2.id">
                      <el-col :span="6">
                         <el-tag closable type="success"
                         @close="del(props.row,item2.id)"
                         >{{item2.authName}}</el-tag>
                      </el-col>
                      <el-col :span="18">

                          <el-tag 
                          closable 
                          type="warning" 
                          class="three"
                          v-for="item3 in item2.children"
                          :key="item3.id"
                          @close="del(props.row,item3.id)"
                          >{{item3.authName}}</el-tag>

                      </el-col>
                    </el-row>

                  </el-col>
          </el-row>


          </div>






      </template>
    </el-table-column>
    <el-table-column
      label="#"
      type="index">
    </el-table-column>
    <el-table-column
      label="角色名称"
      prop="roleName">
    </el-table-column>
    <el-table-column
      label="角色描述"
      prop="roleDesc">
    </el-table-column>
    <el-table-column
      label="操作"
      >
      <template slot-scope="scope">
        <el-button
          size="mini"
          @click="handleEdit(scope.$index, scope.row)">Edit</el-button>
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)">Delete</el-button>
      </template>
    </el-table-column>
  </el-table>



</el-card>

<!-- 添加 -->

<el-dialog title="添加角色" :visible.sync="dialogFormVisible">
  <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
    <el-form-item label="角色名称" prop="roleName">
      <el-input v-model="ruleForm.roleName"></el-input>
    </el-form-item>
    <el-form-item label="角色描述" prop="roleDesc">
      <el-input v-model="ruleForm.roleDesc"></el-input>
    </el-form-item>


</el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisible = false">取 消</el-button>
    <el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
  </div>
</el-dialog>


<!-- 编辑 -->
<el-dialog title="修改角色" :visible.sync="dialogFormVisible1">
  <!-- 
    model数据绑定对象
    rules 验证规则
    ref  获取整个form组件
   -->
  <el-form :model="ruleForm1" :rules="rules1" ref="ruleForm1" label-width="100px" class="demo-ruleForm">
  <el-form-item label="角色名称" prop="roleName">
    <el-input v-model="ruleForm1.roleName"></el-input>
  </el-form-item>
  <el-form-item label="角色描述" prop="roleDesc">
    <el-input v-model="ruleForm1.roleDesc"></el-input>
  </el-form-item>
</el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisible1 = false">取 消</el-button>
    <el-button type="primary" @click="submitForm1('ruleForm1')">确 定</el-button>
  </div>
</el-dialog>





  </div>
</template>

<script>
  export default {
    data() {
      return {
        roles: [],
        dialogFormVisible:false,
        ruleForm: {
          roleName: '',
          roleDesc:""
        },
        rules: {
          roleName: [
            { required: true, message: '请输入活动名称', trigger: 'blur' },
          ],
          roleDesc: [
            { required: true, message: '请输入活动名称', trigger: 'blur' },
          ]
        },
        dialogFormVisible1:false,
        ruleForm1: {
          roleName: '',
          roleDesc:""
        },
        rules1: {
          roleName: [
            { required: true, message: '请输入活动名称', trigger: 'blur' },
          ],
          roleDesc: [
            { required: true, message: '请输入活动名称', trigger: 'blur' },
          ]
        },
      }
    },
    created () {
      this.getdata();
    },
    methods: {
      del(row,rightid){
            // 询问
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          
          this.$axios.delete(`roles/${row.id}/rights/${rightid}`)
          .then(res=>{
            console.log(res,"rolw")
            if(res.meta.status==200){
              row.children=res.data
            
              
            }
          })

        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      },
      submitForm1(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            // alert('submit!');
        -/*  发送请求- this.$axios.xx('接口'，参数)
- 接收响应  res
  - 成功   提示    模态框关闭   重新渲染
  - 失败    提示
 */

          this.$axios.put(`roles/${this.ruleForm1.id}`,this.ruleForm1)
          .then(res=>{
            console.log(res,"bj")
            if(res.meta.status==200){
              this.$message(res.meta.msg)
              this.dialogFormVisible1=false
              this.getdata()
            }else{
              this.$message(res.meta.msg)
            }
          })


          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      add(){
         this.dialogFormVisible=true
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            // alert('submit!');
          this.$axios.post('roles',this.ruleForm)
          .then(res=>{
            console.log(res,2)
            if(res.meta.status==201){
              this.$message(res.meta.msg)
              this.dialogFormVisible=false
              this.getdata()
            }
          })

          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      getdata(){
        this.$axios.get('roles')
        .then(res=>{
          console.log(res.data,1)
          this.roles=res.data
        })
      },
       handleEdit(index, row) {
        console.log(index, row);

// - 模态框显示
        this.dialogFormVisible1=true
// - **内容回填**
        this.ruleForm1=row

      },
      handleDelete(index, row) {
        console.log(index, row);
        // 询问
         this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$axios.delete(`roles/${row.id}`)
          .then(res=>{
            console.log(res,"sc")
            if(res.meta.status==200){
              this.$message(res.meta.msg)
              this.getdata()
            }else{
              this.$message(res.meta.msg)
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      }
    },
  }
</script>

<style  scoped>
.el-card{
  margin-top: 15px;
}

.con{
  padding:15px 45px;
  
}

.one{
  padding:10px;
  border-bottom: 1px solid #ddd;
  display: flex;
  align-items: center;
}
.two{
  padding:10px;
  display: flex;
  align-items: center;
}
.three{
  margin-left: 6px;
  margin-top: 6px;
}
</style>